<script setup lang="ts">
import { inject, ref, type Ref } from 'vue';
import SonSonCom from './SonSonCom.vue'

interface Person {
  name: string
  age: number
}
// 子组件
defineProps<Person>()

// const emits = defineEmits<{
//   // 参数1：e 回调函数的名称   参数n：参数类型
//   (e: 'my-event',age: number): void
// }>()

const emits = defineEmits<{
  // key：回调函数的名称  
  // value：参数类型
  'my-event': [age: number]
  'get-name': [name: string]
}>()

const totalCount = inject<Ref<number>>('totalCount',ref(0))
</script>

<template>
    <div class="son">
      <h2>我是子组件</h2>
      <p>{{ name }}</p>
      <p>{{ age }}</p>
      <p>provide提供的数据{{ totalCount }}</p>
      <button @click="totalCount++">修改provide提供的数据+1</button>
      <button @click="emits('my-event',age)">点击子传父</button>
      <button @click="emits('get-name',name)">新写法</button>
      <SonSonCom/>
    </div>
</template>

<style scoped>
.son{
  border: 1px solid red;
  margin: 1px;
  padding-left: 10px;
}
</style>
